<!DOCTYPE HTML>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="scroll_support.js"></script>
<style>
html {
  height: 3000px;
  width: 3000px;
}
#targetDiv {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

#innerDiv {
  width: 400px;
  height: 400px;
}
</style>

<body style="margin:0" onload=runTest()>
<div id="targetDiv">
  <div id="innerDiv">
  </div>
</div>
</body>
<script>
var element_scrollend_arrived = false;
var document_scrollend_arrived = false;

function onElementScrollEnd(event) {
  assert_false(event.cancelable);
  assert_false(event.bubbles);
  element_scrollend_arrived = true;
}

function onDocumentScrollEnd(event) {
  assert_false(event.cancelable);
  // scrollend events are bubbled when the target node is document.
  assert_true(event.bubbles);
  document_scrollend_arrived = true;
}

function callScrollFunction([scrollTarget, scrollFunction, args]) {
  scrollTarget[scrollFunction](args);
}

function runTest() {
  let root_element = document.scrollingElement;
  let target_div = document.getElementById("targetDiv");

  promise_test (async (t) => {
    await waitForCompositorCommit();
    target_div.addEventListener("scrollend", onElementScrollEnd);
    document.addEventListener("scrollend", onDocumentScrollEnd);

    let test_cases = [
      [target_div, 200, 200, [target_div, "scrollTo", { top: 200, left: 200, behavior: "auto" }]],
      [target_div, 0, 0, [target_div, "scrollTo", { top: 0, left: 0, behavior: "smooth" }]],
      [root_element, 200, 200, [root_element, "scrollTo", { top: 200, left: 200, behavior: "auto" }]],
      [root_element, 0, 0, [root_element, "scrollTo", { top: 0, left: 0, behavior: "smooth" }]],
      [target_div, 200, 200, [target_div, "scrollBy", { top: 200, left: 200, behavior: "auto" }]],
      [target_div, 0, 0, [target_div, "scrollBy", { top: -200, left: -200, behavior: "smooth" }]],
      [root_element, 200, 200, [root_element, "scrollBy", { top: 200, left: 200, behavior: "auto" }]],
      [root_element, 0, 0, [root_element, "scrollBy", { top: -200, left: -200, behavior: "smooth" }]]
    ];

    for(i = 0; i < test_cases.length; i++) {
      let t = test_cases[i];
      let target = t[0];
      let expected_x = t[1];
      let expected_y = t[2];
      let scroll_datas = t[3];

      callScrollFunction(scroll_datas);
      await waitFor(() => { return element_scrollend_arrived || document_scrollend_arrived; }, target.tagName + "." + scroll_datas[1] + " did not receive scrollend event.");
      if (target == root_element)
        assert_false(element_scrollend_arrived);
      else
        assert_false(document_scrollend_arrived);
      assert_equals(target.scrollLeft, expected_x, target.tagName + "." + scroll_datas[1] + " scrollLeft");
      assert_equals(target.scrollTop, expected_y, target.tagName + "." + scroll_datas[1] + " scrollTop");

      element_scrollend_arrived = false;
      document_scrollend_arrived = false;
    }
  }, "Tests scrollend event for calling scroll functions.");

  promise_test(async (t) => {
    await waitForCompositorCommit();

    let test_cases = [
      [target_div, "scrollTop"],
      [target_div, "scrollLeft"],
      [root_element, "scrollTop"],
      [root_element, "scrollLeft"]
    ];
    for (i = 0; i < test_cases.length; i++) {
      let t = test_cases[i];
      let target = t[0];
      let attribute = t[1];
      let position = 200;

      target.style.scrollBehavior = "smooth";
      target[attribute] = position;
      await waitFor(() => { return element_scrollend_arrived || document_scrollend_arrived; }, target.tagName + "." + attribute + " did not receive scrollend event.");
      if (target == root_element)
        assert_false(element_scrollend_arrived);
      else
        assert_false(document_scrollend_arrived);
      assert_equals(target[attribute], position, target.tagName + "." + attribute + " ");
      element_scrollend_arrived = false;
      document_scrollend_arrived = false;

      await waitForCompositorCommit();
      target.style.scrollBehavior = "auto";
      target[attribute] = 0;
      await waitFor(() => { return element_scrollend_arrived || document_scrollend_arrived; }, target.tagName + "." + attribute + " did not receive scrollend event.");
      if (target == root_element)
        assert_false(element_scrollend_arrived);
      else
        assert_false(document_scrollend_arrived);
      assert_equals(target[attribute], 0, target.tagName + "." + attribute + " ");
      element_scrollend_arrived = false;
      document_scrollend_arrived = false;
    }
  }, "Tests scrollend event for changing scroll attributes.");
}
</script>
